<template>
	<view class="">
		<view class="content">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
				<view class="menu-content">
					<view v-for="(item,index) in data.typeList" :key="index" @click="shangeType(index,item.code)"
						:class="['title-item',{'title-item-active':data.index==index},'flex-center-r']">
						<text>{{item.value}}</text>
						<view :class="['bottom-line',{'bottom-line-active':data.index==index}]"></view>
					</view>

				</view>

			</scroll-view>

		</view>
		<view class="con">
			<view class="content">
				<view class="cd-item flex-justify-s" v-for="(item,index) in data.list" :key="index">
					<view class="">
						<text class="cd-name">{{item.name}}</text>
						<view class="card-info flex-align-center">
							<text>会员卡类型：{{item.memberType}}</text>
							<text>会员人数：{{item.memberNum}}人</text>
						</view>
					</view>
					<navigator :url="`/pages/vip/venueVip/venueVip?id=${item.id}`" hover-class="none" class="details-btn flex-center">
						查看详情 <uv-icon name="arrow-right" size="8" color="#ffffff"></uv-icon> </navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		getMnumByName,
		echoSiteByEnterpriseId
	} from '../../../requestApi/api.js';
	const data = ref({
		id: '',
		list: [],
		typeList: [{
			code: '',
			value: '全部'
		}],
		index: 0,
		form: {
			enterpriseId: '',
			type: '',
			current: 1,
			size: 10,
		},
		isLoading: false,
		isComplete: false,
	})
	onLoad((e) => {
		data.value.form.enterpriseId = e.id;
		getSiteType();
	})
	//获取场地类型
	const getSiteType = () => {
		getMnumByName({
			enumName: 'venueTypeEnum'
		}).then(res => {
			data.value.typeList = data.value.typeList.concat(res.data);
			getList()
		})
	};

	//切换类型
	const shangeType = (index,type) => {
		data.value.index = index;
		data.value.form.type=type;
		data.value.isComplete=false
		data.value.list=[];
		data.value.form.current=1;
		getList();
	};
	//获取列表
	const getList = () => {
		data.value.isLoading = true;
		echoSiteByEnterpriseId(data.value.form).then(res => {
			data.value.isLoading = false;
			data.value.list = data.value.list.concat(res.data.records);
			data.value.form.current++;
			data.value.isComplete = !res.data.records.length;
		})
	};

	//触底加载更多
	onReachBottom(() => {
		!data.value.isLoading && !data.value.isComplete && getList();
	})
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.content {
		padding: 40rpx 0;
		margin-bottom: 12rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
	}

	.menu-content {
		padding: 0 40rpx;
		margin-bottom: 10rpx;

		.title-item {
			font-size: 30rpx;
			color: #2C2C2C;
			margin-right: 40rpx;
			display: inline-block;

			.bottom-line {
				width: 30rpx;
				height: 8rpx;
				// background-color: #FFFFFF;
				border-radius: 16rpx;
				margin: 4rpx auto;
			}

			.bottom-line-active {
				background-color: #5E77F8;
			}

		}

		.title-item-active {
			font-size: 30rpx;
			color: #2C2C2C;
			font-weight: bold;
		}
	}

	.con {
		padding: 0 20rpx;

		.content {
			width: 710rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			padding: 34rpx 46rpx;

			.cd-item {
				padding-bottom: 14rpx;
				border-bottom: 2rpx solid #F8F8F8;
				margin-bottom: 20rpx;

				.cd-name {
					font-size: 30rpx;
					font-weight: bold;
					color: #2C2C2C;
				}

				.card-info {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #A5A5A5;

					text {
						margin-right: 34rpx;
					}

				}

				.details-btn {
					width: 116rpx;
					height: 34rpx;
					background: rgba(61, 195, 156, 1);
					border-radius: 16rpx;
					text-align: center;
					line-height: 34rpx;
					color: #fff;
					font-size: 20rpx;

					text {
						margin-left: 5rpx;
					}
				}
			}

		}

	}
</style>